<template>
  <div style="background: #EAEDF1;">
      <!-- 顶部面包屑 -->
      <div class="api-top">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">您当前的位置</el-breadcrumb-item>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>API管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 主体部分 -->
      <div class="api-main">
        <div class="title">
            <span>API管理</span> 
        </div>
        <div>
            <el-form ref="form" :model="form" label-width="160px">

                <div class="title_bar">
                    百度普通收录推送API
                </div>
                <el-form-item label="是否开启">
                    <el-switch v-model="form.delivery01"></el-switch>
                </el-form-item>
                <div class="inline_a" v-show="form.delivery01">
                    <el-form-item label="主域名推送">
                        <el-input v-model="form.push_msg" style="width:300px"></el-input>
                        <div class="tip" style="left:310px">百度普通收录主动推送API_URL<a href="#">[使用说明]</a></div>
                    </el-form-item>
                    <el-form-item label="子域名推送">
                        <el-input type="textarea"  placeholder="子域名一行一个" v-model="form.push_desc" style="width:700px;height:100px"></el-input>
                    </el-form-item>
                </div>

                <div class="title_bar">
                    百度快速收录推送API
                </div>
                <el-form-item label="是否开启">
                    <el-switch v-model="form.delivery02"></el-switch>
                    <div class="tip"><a href="#">[使用说明]</a></div>
                </el-form-item>
                <div class="inline_b" v-show="form.delivery02">
                     <el-form-item label="推送URL类型">
                        <el-radio-group v-model="form.resource">
                        <el-radio label="响应式"></el-radio>
                        <el-radio label="手机"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="快速收录">
                        <el-input v-model="form.push_sl" style="width:700px"></el-input>
                        <div class="tip" style="left:310px;posiation:absolute;
                        top:0;left:720px">百度资源提交快速收录主动推送API_URL</div>
                    </el-form-item>
                    <el-form-item label="MIP收录">
                        <el-input v-model="form.push_mip" style="width:700px"></el-input>
                        <div class="tip" style="left:310px;posiation:absolute;
                        top:0;left:720px">MIP收录主动推送API_URL</div>
                    </el-form-item>
                </div>

                <div class="title_bar">
                    百度统计查询
                </div>
                <el-form-item label="URL">
                    <el-input v-model="form.name" style="width:300px"></el-input>
                    <div class="tip" style="left:310px"><a href="#">[使用说明]</a></div>
                </el-form-item>

                <div class="title_bar">
                    百度切词接口
                </div>
                <el-form-item label="是否开启">
                    <el-switch v-model="form.delivery03"></el-switch>
                    <div class="tip"><a href="#">[使用说明]</a></div>
                </el-form-item>
                <div class="inline_c" v-show="form.delivery03">
                    <el-form-item label="百度APPID">
                        <el-input v-model="form.appid" style="width:450px"></el-input>
                    </el-form-item>
                    <el-form-item label="API KEY">
                        <el-input v-model="form.apikey" style="width:450px"></el-input>
                    </el-form-item>
                    <el-form-item label="SECRET Key">
                        <el-input v-model="form.skey" style="width:450px"></el-input>
                    </el-form-item>
                    <el-form-item label="切词数量">
                        <el-input v-model="form.wordnum" style="width:300px"></el-input>
                        <div class="tip" style="left:310px">设置切词显示数量，默认0为随机</div>
                    </el-form-item>
                </div>

                <div class="title_bar">
                    同义词API
                </div>
                <el-form-item label="是否开启">
                    <el-switch v-model="form.delivery04"></el-switch>
                    <div class="tip">开启同义词前需要先设置好百度切词接口<a href="#">[使用说明]</a></div>
                </el-form-item>

                <div class="title_bar">
                    多站点控制平台对接
                </div>
                <el-form-item label="一键登录">
                    <el-switch v-model="form.delivery05"></el-switch>
                    <div class="tip">允许控制平台一键登录，如不使用，建议关闭</div>
                </el-form-item>
                <el-form-item label="百度自动推送">
                    <el-switch v-model="form.delivery06"></el-switch>
                    <div class="tip">开启百度自动推送请先设置百度推送API</div>
                </el-form-item>
                <el-form-item label="接受平台推送">
                    <el-switch v-model="form.delivery07"></el-switch>
                    <div class="tip"><a href="#">[使用说明]</a></div>
                </el-form-item>
                <el-form-item label="排名监控获取">
                    <el-switch v-model="form.delivery08"></el-switch>
                    <div class="tip">开启排名监控获取前需先在控制平台添加排名监控查询<a href="#">[使用说明]</a></div>
                </el-form-item>
                <form action="">
                    <input type="button" value="提交" class="submit">
                </form>
            </el-form>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            form:{
                delivery01: false,
                delivery02: false,
                delivery03: false,
                delivery04: false,
                delivery05: false,
                delivery06: false,
                delivery07: false,
                delivery08: false,
                name:"",
                push_msg:"",
                push_desc:"",
                resource: '响应式',
                appid:'',
                apikey:'',
                skey:'',
                wordnum:'0'
            }
        }
    },
    watch:{
        //深度监听表单按钮的状态
        form:{
            handler:function(n,o){
            console.log(n);
        },
        deep:true
        }
    }
}
</script>

<style scoped>
.tip,a{
    color: #999;
}
.api-top{
    background: #fff;
    height: 30px;
    padding: 0 25px;
}
.el-breadcrumb{
    line-height: 30px;
}
.api-main{
    margin: 30px 30px 0;
    min-height: calc(100% - 40px);
    background: #fff;
    padding: 15px 27px;
}
.title{
    line-height: 44px;
    height: 45px;
    margin:0 0 20px;
    border-bottom: 1px solid#ddd;
}
.title_bar{
    font-size: 14px;
    padding: 7px 18px;
    line-height: 1.4;
    background: #f5f6fa;
    border: 1px solid #e1e6eb;
    margin-bottom: 10px;
}
.title span{
    padding-left: 15px;
    margin-left: 2px;
    border-left: 2px solid #88b7e0;
    color: #2d2b2c;
    height: 15px;
    line-height: 15px;
    display: inline-block;
}
.el-form-item{
    position: relative;
}
.tip{
    position: absolute;
    top: 0;
    left: 60px;
}
.submit{
    background-color: #28B5D6;
    width: 58px;
    height: 32px;
    color: white;
    border: none;
    font-size: 14px;
    margin-left: 160px;
    margin-bottom: 50px;
}
</style>